﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link href="static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="static/h-ui.admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<script type="text/javascript" src="js/admin.check.login.js"></script>

<link href="lib/lightbox2/2.8.1/css/lightbox.css" rel="stylesheet" type="text/css" >

	<!--jquery-->
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<!--自定义工具-->
	<script src="js/HttpUtil.js"></script>
	<!--导入 vue 包-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>图片展示</title>
</head>
<body>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
	<span class="c-gray en">&gt;</span>
	图片管理
	<span class="c-gray en">&gt;</span>
	图片展示
	<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="pd-20" id="show-img">
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
		<a href="javascript:;" onclick="edit()" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe6df;</i> 编辑</a>
		<a href="javascript:;" @click="deleteImgList()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
		</span>
		<span class="r">共有数据：<strong>{{img_list.length}}</strong>条</span>
	</div>
	<div class="portfolio-content">
		<ul class="cl portfolio-area">
			<li class="item" v-for="(item,index) in img_list">
				<div class="portfoliobox">
					<input class="checkbox" v-model="checkedname" type="checkbox" :value="item">
					<div class="picbox">
						<a :href="getImgPath+item" data-lightbox="gallery" data-title="图片"><img :src="getImgPath+item"></a>
					</div>
					<div class="textbox">图片</div>
				</div>
			</li>
		</ul>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/lightbox2/2.8.1/js/lightbox.min.js"></script>
<script type="text/javascript">
$(function(){
	$.Huihover(".portfolio-area li");
});
</script>

<script>

	var vm = new Vue({
		el: '#show-img',
		data: {
			img_list: [],      /*图片名*/
			getImgPath: appendHost("imgDo/fileDownload?id="),
			checkedname: [],   /*选中的按钮*/
		},
		methods: {
			/*获取数据库中的数据，展示在页面上*/
			getImgList: function () {
				console.log("浏览器传参："+getUrlParam("path"));
				let params={path: getUrlParam("path")};
				let vue_quote = this;
				let url = "/imgDo/allPath";
				getWithParams(url, params, function (data) {
					console.log(data);
					vue_quote.img_list = data;
				});
			},

			deleteImgList: function () {
				console.log(this.checkedname);
				let vue_quote = this;
				let params={fileNames: vue_quote.checkedname};
				let url = "/imgDo/deleteImg";
				getWithParams(url, params, function (data) {
					console.log(data);
				});
				location.reload();
			},
		},

		/**页面加载完成后调用*/
		mounted: function () {
			this.getImgList();
		}
	});

</script>

</body>
</html>